<script setup lang="ts">
import useStore from '@/store/index'
import {ProvinceStatisticDto} from "@/ts/entityTypes.ts";
import {reactive ,onMounted} from "vue";
import {getProvinceStatisticsApi} from "@/api/statisticsApi.ts";
import {ElMessage} from "element-plus";

const store = useStore()
store.homeTitle = '省分组检查统计'
let tableData = reactive<Array<ProvinceStatisticDto>>([])

const initData = async () => {
  let res = await getProvinceStatisticsApi().catch((err) => {
    ElMessage.error(err)
  })
  if (res?.data.code == 200) {
    tableData.splice(0, tableData.length)
    tableData.push(...res.data.data)
  } else {
    ElMessage.error(res?.data.msg)
  }
}

onMounted(async () => {
  await initData()
})

</script>

<template>
<div class="main-box">
  <div class="title-box">
    <h4 style="color: white">省分组检查统计</h4>
  </div>
  <el-table style="width: 90%" :data="tableData" :max-height="750">
    <el-table-column label="省编号" prop="code"></el-table-column>
    <el-table-column label="省简称" prop="provinceShort"></el-table-column>
    <el-table-column label="省名称" prop="province"></el-table-column>
    <el-table-column label="SO2超标累计" prop="sulfurExceedNum"></el-table-column>
    <el-table-column label="CO超标累计" prop="carbonExceedNum"></el-table-column>
    <el-table-column label="PM2.5超标累计" prop="particulateExceedNum"></el-table-column>
    <el-table-column label="AQI超标累计" prop="aqiExceedNum"></el-table-column>
  </el-table>
</div>
</template>

<style scoped>
@import "../css/main-components.css";
</style>
